<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat App</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="chat-app">
        <div class="sidebar">
            <div class="user-list">
                <div class="user-item">
                    <img src="avatar1.png" alt="Avatar">
                    <div class="user-info">
                        <span>10000</span>
                        <p>还能怎么办呢，就这样吧</p>
                    </div>
                </div>
                <!-- Add more user items here -->
            </div>
            <div class="search-bar">
                <input type="text" placeholder="搜索">
            </div>
            <div class="settings">
                <button><i class="fas fa-cog"></i></button>
            </div>
        </div>
        <div class="main-chat">
            <div class="chat-header">
                <img src="avatar2.png" alt="Avatar">
                <span>10002</span>
                <div class="emoji-panel">
                    <img src="emoji1.png" alt="Emoji">
                    <img src="emoji2.png" alt="Emoji">
                </div>
            </div>
            <div class="chat-messages">
                <!-- Chat messages will be appended here -->
            </div>
            <div class="message-input">
                <input type="text" placeholder="输入消息...">
                <button>发送</button>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>